<template>
  <el-form-item>
    <el-badge :value="100" :max="10" class="item">
    <el-button type="primary" @click="loadCustomer">
      下单
    </el-button>
    </el-badge>
  </el-form-item>
  <!-- 菜品搜索卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="菜品搜索">
        <el-input placeholder="输入菜品名" style="width: 220px;"
                  v-model="searchFoodForm.foodName"
                  @keydown.enter="loadFood"></el-input>
      </el-form-item>
      <el-form-item label="菜品状态">
        <el-select placeholder="请选择菜品状态" style="width: 220px;"
                   v-model="searchFoodForm.status" @change="loadFood">
          <el-option label="有" value="1"></el-option>
          <el-option label="无" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadFood">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 页面数据卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="FoodArr">
      <el-table-column type="index" label="菜品编号" width="80" align="center"></el-table-column>
      <el-table-column label="菜品名" prop="foodName" align="center"></el-table-column>
      <el-table-column label="简介" prop="foodIntroduce" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <!-- 在菜单页面的操作下的添加功能           -->
          <el-button link type="primary" @click="addFood(scope.row.id)">添加</el-button>
          <!--在菜单页面的操作下的删除功能            -->
          <el-button link type="primary" @click="deleteFood(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>


  <!-- 点我要下单的页面卡片 -->
    <el-dialog  v-model="dialogVisible"  style="width: 1000px;padding: 40px;">
      <el-table :data="CustomerArr">
        <el-table-column type="index" label="菜品编号" width="80" align="center"></el-table-column>
        <el-table-column label="菜品名" prop="placeFoodName" align="center" ></el-table-column>
        <el-table-column label="价格" prop="placePrice" align="center" ></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
<!-- 在菜单页面的操作下的添加功能           -->
            <el-button link type="primary" @click="addFood(scope.row.id)">添加</el-button>
<!--在菜单页面的操作下的删除功能            -->
            <el-button link type="primary" @click="deleteFood(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="12">
        <el-form-item label="备注">
          <el-input placeholder="请输入" v-model="saveNotes" type="textarea" resize="none" :rows="3"></el-input>
        </el-form-item>
      </el-col>
      <el-button type="primary" @click="saveUser">下单</el-button>
    </el-dialog>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage } from "element-plus";

// 定义变量控制弹窗是否出现
const dialogVisible = ref(false);
// 定义变量用来存储表格数据
const ordervisiable =ref ();


// 菜品表单数据
const searchFoodForm = ref({foodName: "", price: "" });
const FoodArr = ref([]);
//客户表单数据
const searchUserForm = ref({place_foodName: "", PlacePrice: ""});
const CustomerArr = ref([]);
// 保存搜索结果
const searchResults = ref([]);
//定义变量保存备注
const saveNotes = ref("");
//定义保存下单的方法
const saveUser =()=> {
  let data = qs.stringify(saveNotes.value);
  axios.post(BASE_URL + '/v1/customer/save', data).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('下单成功');
      dialogVisible.value = false;
      saveUserForm.value = {};
      loadFood();
    } else {
      ElMessage.error('系统出错请稍后尝试');
    }
  })
};


// const beforeAddUser = async () => {
//   // 下单逻辑，假设下单就是向数据库插入一条数据并刷新表格数据
//   try {
//     const response = await axios.post('你的下单接口地址', {
//       // 下单所需的数据
//     });
//     if (response.status === 200) {
//       ElMessage.success('下单成功');
//       await searchUsers(); // 下单成功后刷新数据
//     } else {
//       ElMessage.error('下单失败');
//     }
//   } catch (error) {
//     ElMessage.error('下单时发生错误');
//   }
// };

// 开屏幕展示菜单
const loadFood = () => {
  let data = qs.stringify(searchFoodForm.value);
  axios.get(BASE_URL +'/v1/menu/select?'+ data).then((response) => {
        if (response.data.code === 2000) {
          FoodArr.value = response.data.data;
          console.log(FoodArr.value);
        } else {
          ElMessage.error(response.data.msg);
        }
      }).catch((error) => {
        ElMessage.error('请求发生错误：' + error.message);
      });
}
// 下单弹窗订单数据加载
const loadCustomer = () => {
  let data = qs.stringify(searchUserForm.value);
  axios.get(BASE_URL +'/v1/customer/selectPlaceorders?'+ data).then((response) => {
    if (response.data.code === 2000) {
      dialogVisible.value = true;
      CustomerArr.value = response.data.data;
      console.log(CustomerArr.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
//弹窗显示顾客数据


//自动刷新
onMounted(()=>{
  loadFood();
})

//重置搜索
const resetSearch = () => {
  //清空搜索条件并重新加载所有用户数据
  searchFoodForm.value = {};
  loadFood();
}

// 在菜单界面和下单界面弹窗添加菜品
const addFood = (id) => {
  let data = qs.stringify(saveUserForm.value);
  axios.post(BASE_URL+'/v1/menu/insert/'+id).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success('添加成功!');
      //重新加载用户数据
      loadFood();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

// 在菜单界面和下单界面弹窗删除菜品
const deleteFood = (id) => {
  if(confirm('确认要删除该菜品吗?')){
    axios.post(BASE_URL+'/v1/menu/delete/'+id).then((response)=>{
      if(response.data.code==2000){
        ElMessage.success('删除成功!');
        //重新加载用户数据
        loadFood();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
}


</script>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
